﻿@{
    ViewBag.Title = "Index";
}
<body>
    <h1 id="titulo">Toques de Darsena</h1>

    @Html.ActionLink("Salir", "Logout", "Account");
  
     <div style="float: right;padding-top:50px;padding-right:100px;">
         <table id="darsenas">
             <thead>
                 <tr>
                     <th class="fila">Darsena</th>
                     <th class="fila">Empresa</th>
                     <th class="fila">Destino</th>
                 </tr>
             </thead>
             <tbody>
                 <tr id="darsena1">
                     <td>1</td>
                     <td class="empresa">@Model["1"][0].empresa.nombre</td>
                     <td class="destino">@Model["1"][0].localidad.nombre</td>
                 </tr>
                 <tr id="darsena2">
                     <td>2</td>
                     <td class="empresa">@Model["1"][1].empresa.nombre</td>
                     <td class="destino">@Model["1"][1].localidad.nombre</td>
                 </tr>
                 <tr id="darsena3">
                     <td>3</td>
                     <td class="empresa">@Model["1"][2].empresa.nombre</td>
                     <td class="destino">@Model["1"][2].localidad.nombre</td>
                 </tr>
                 <tr id="darsena4">
                     <td>4</td>
                     <td class="empresa">@Model["1"][3].empresa.nombre</td>
                     <td class="destino">@Model["1"][3].localidad.nombre</td>
                 </tr>
                 <tr id="darsena5">
                     <td>5</td>
                     <td class="empresa">@Model["1"][4].empresa.nombre</td>
                     <td class="destino">@Model["1"][4].localidad.nombre</td>
                 </tr>
                 <tr id="darsena6">
                     <td>6</td>
                     <td class="empresa">@Model["1"][5].empresa.nombre</td>
                     <td class="destino">@Model["1"][5].localidad.nombre</td>
                 </tr>
                 <tr id="darsena7">
                     <td>7</td>
                     <td class="empresa">@Model["1"][6].empresa.nombre</td>
                     <td class="destino">@Model["1"][6].localidad.nombre</td>
                 </tr>
                 <tr id="darsena8">
                     <td>8</td>
                     <td class="empresa">@Model["1"][7].empresa.nombre</td>
                     <td class="destino">@Model["1"][7].localidad.nombre</td>
                 </tr>
                 <tr id="darsena9">
                     <td>9</td>
                     <td class="empresa">@Model["1"][8].empresa.nombre</td>
                     <td class="destino">@Model["1"][8].localidad.nombre</td>
                 </tr>
                 <tr id="darsena10">
                     <td>10</td>
                     <td class="empresa">@Model["1"][9].empresa.nombre</td>
                     <td class="destino">@Model["1"][9].localidad.nombre</td>
                 </tr>
             </tbody>
         </table>
     </div>
    <div id="agregar">
        <h2>Agregar</h2>
        <form id="formulario">
            <label>
                <span>Codigo Empresa</span>
                <br />
                <input id="empresaId" type="number" name="empresa" />
                <span id="nombreEmpresa"></span>
            </label>
            <br />
            <label>
                <span>Codigo Localidad</span>
                <br />
                <input id="localidadId" type="number" name="localidad" />
                <span id="nombreLocalidad"></span>
            </label>
            <br />
            <label>
                <span>Codigo Micro</span>
                <br />
                <input id="nroInterno" type="text" name="nroInterno" />
            </label>
            <br />
            <label>
                <span>Codigo Darsena</span>
                <br />
                <input id="codDarsena" type="number" name="codDarsena" />
            </label>
            <br />
            <input class="boton" type="submit" value="Agregar" />

        </form>
        </div>



        <div id="listado">
            <h2>Listado</h2>
            <span id="mensaje"></span>
            <table id="muestra">
                <thead>
                    <tr>
                        <th class="fila">Empresa</th>
                        <th class="fila">Localidad</th>
                        <th class="fila">Nro de Micro</th>
                        <th class="fila">Fecha</th>
                        <th class="fila">Operador</th>
                        <th class="fila" colspan="2">Operaciones</th>
                    </tr>
                </thead>
                <tbody>


                    @{  int co = 0;
                        foreach (var i in Model["0"])
                        {
                        <tr>
                            <td>@i.empresa.nombre</td>
                            <td>@i.localidad.nombre</td>
                            <td>@i.nroInterno</td>
                            <td>@i.fecha</td>
                            <td class="usr">@i.usuario.usuario</td>
                            <td>@Html.ActionLink("Modificar", "Modificar", "Darsena", new { id = i.id }, null)</td>
                            <td>
                                <button class="borrar" value="@i.id">X</button></td>
                        </tr>
                    
                        }

                        co++;
                    }
                </tbody>
            </table>
        </div>
</body>

<script type="text/javascript">

    var formulario = $("#formulario");
    formulario.submit(agregarAjax);

    var inputEmpresa = $("#empresaId");
    inputEmpresa.blur(chequearEmpresaAjax);

    var inputLocalidad = $("#localidadId");
    inputLocalidad.blur(chequearLocalidadAjax);

    function agregarAjax() {

        var url = "@Url.Action("AgregarAjax", "Darsena")";

        var datos = {}
        datos.empresa = $("#empresaId").val();
        datos.localidad = $("#localidadId").val();
        datos.nroInterno = $("#nroInterno").val();
        datos.codDarsena = $("#codDarsena").val();
       
        console.log(datos.empresa);
        if ((datos.empresa != "") && (datos.localidad != "") && (datos.nroInterno != "") && (datos.codDarsena != ""))
            if (alphanumeric(datos.nroInterno)) {
                var promesa = $.post(url, datos);
                promesa.done(mostrarResultado);
                promesa.fail(mostrarError);
            }
            else {
                alert("El código de micro contiene caracteres inválidos");
            }
        else {
            alert("Alguno de los campos está vacío.");
        }

        function mostrarResultado(datosDelServidor) {
            if (datosDelServidor["0"] == null)
                alert("Alguno de los campos contiene información inválida. \nPor favor verifique que los códigos sean válidos.");
            else {
                console.log(datosDelServidor);
                var fila = "<tr><td>#empresa#</td><td>#localidad#</td><td>#interno#</td><td>#fecha#</td><td class='usr'>#usuario#</td><td>#modificar#</td>#borrar#</tr>"
                fila = fila.replace("#empresa#", datosDelServidor["0"].empresa.nombre);
                fila = fila.replace("#localidad#", datosDelServidor["0"].localidad.nombre);
                fila = fila.replace("#interno#", datosDelServidor["0"].nroInterno);
                fila = fila.replace("#fecha#", datosDelServidor["2"]);
                fila = fila.replace("#borrar#", datosDelServidor["3"]);
                fila = fila.replace("#usuario#", datosDelServidor["0"].usuario.usuario);

                var rutaMod = "<a href='#ruta#'>Modificar</a>"
                rutaMod = rutaMod.replace("#ruta#", datosDelServidor["1"]);
                fila = fila.replace("#modificar#", rutaMod);

                $("#muestra").append(fila);

                $("#darsena" + $("#codDarsena").val()).children('td.empresa').text(datosDelServidor["0"].empresa.nombre);
                $("#darsena" + $("#codDarsena").val()).children('td.destino').text(datosDelServidor["0"].localidad.nombre);

            }
        }

        function mostrarError() {
            console.log("Error");
        }

        return false;
    }


    $('table').on('click', '.borrar', function borrar() {
        var url = "@Url.Action("BorrarAjax", "Darsena")";
        var td = $(this).parents('tr').children("td.usr");
        var usrActual = "@WebSecurity.CurrentUserName";
        console.log("entro");
        var usrTabla = td.html();

        console.log(usrActual, usrTabla, usrActual == usrTabla);
        if (usrActual == usrTabla) {
            var datos = {};
            datos.id = $(this).val();

            var promesa = $.post(url, datos)
            promesa.done(mostrarResultado);
            promesa.fail(mostrarError);
            var boton = $(this);
        }
        else {
            $("#mensaje").text("El operario no tiene permisos para eliminar esta entrada");
        }
        function mostrarResultado() {
            console.log("Elemento borrado");
            boton.closest('tr').remove();
            $("#mensaje").text("Elemento borrado");
        }

        function mostrarError(datosDelServidor) {
            console.log(datosDelServidor);
        }

    });

    function chequearEmpresaAjax() {
        var url = "@Url.Action("ChequearEmpresaAjax", "Darsena")";

        var datos = {}
        datos.empresaId = $("#empresaId").val();

        if ((datos.empresaId != "") && (!(isNaN(datos.empresaId)))) {
            var promesa = $.get(url, datos);
            promesa.done(mostrarResultado);
            promesa.fail(mostrarError);
        }
        else {
            console.log("El código de empresa ingresado contiene caracteres inválidos");
        }
        function mostrarResultado(datosDelServidor) {
            console.log(datosDelServidor);
            $("#nombreEmpresa").text(datosDelServidor);
        }

        function mostrarError() {
            $("#nombreEmpresa").text("Empresa invalida");
        }
    }

    function chequearLocalidadAjax() {
        var url = "@Url.Action("ChequearLocalidadAjax", "Darsena")";

        var datos = {}
        datos.localidadId = $("#localidadId").val();

        if ((datos.localidadId != "") && (!(isNaN(datos.localidadId)))) {
            var promesa = $.get(url, datos);
            promesa.done(mostrarResultado);
            promesa.fail(mostrarError);
        }
        else {
            console.log("El código de localidad ingresado contiene caracteres inválidos");
        }
        function mostrarResultado(datosDelServidor) {
            console.log(datosDelServidor);
            $("#nombreLocalidad").text(datosDelServidor);
        }

        function mostrarError() {
            $("#nombreLocalidad").text("Localidad invalida");
        }
    }

    function alphanumeric(value) {
        regex = /^[a-zA-Z0-9]+$/;
        return regex.test(value);
    }



</script>

